
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="Copyright" content="JavaScript http://www.ijavascript.cn/" /> 
<meta name="description" content="DIV+CSS" /> 
<meta content="DIV+CSS" name="keywords" /> 
<title>Welcome to Tablecloth</title>


<script>

modify = function()
{
	alert("adfs");
}

</script>

<!-- paste this code into your webpage -->

<link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript" src="tablecloth/tablecloth.js"></script>

<!-- end -->

<style type="text/css" media="all">
/*TAB*/
#tab * {font-size:12px;}
#tab h3 a {display:inline-block;}
#tab h3 a {display:block;}
#tab {position:relative;}
#tab h3,#tab ul,#tab div,#tab li {margin:0;padding:0;list-style-type:none;}
#tab ul li {position:absolute;left:0;top:0;float:left;display:block;width:100px;height:30px;font-size:0;}
#tab ul li#tab2 {left:100px;}
#tab ul li#tab3 {left:200px;}
#tab ul li#tab4 {left:300px;}
#tab ul li div {position:absolute;clear:both;}
#tab ul li div#oDIV2 {left:-100px;}
#tab ul li div#oDIV3 {left:-200px;}
#tab ul li div#oDIV4 {left:-300px;}
 
/*TAB-标题修饰*/
#tab,#tab ul li div,#tab ul li div li {width:450px;}/* 设置总宽度[width] */
#tab {height:200px;background:#ccc;overflow:hidden;}/* 设置总高度[height]、标题背景颜色[background] */
#tab ul li h3 a {height:18px;padding:5px 0 2px;margin:5px 0px 0px 5px;text-align:center;border:solid #ccc 1px;border-bottom:none;color:#333;}/* 标题默认状态 */
#tab ul li h3 a:hover {background-color:#ddd;border-color:#fff;}/* 鼠标经过状态 */
#tab ul li.up h3 a {background:#999;border-color:#fff #999 #999 #fff;color:#fff;}/* 当前窗口状态 */
#tab ul li div {border:solid #999;border-width:1px 0;background:#f7f7f7;height:167px;}/* 设置内容高度[height]、背景颜色[background]、上下分割线[border] */

/*TAB1效果[ol/li]*/
#tab ul li #oDIV1 ol {margin:8px;padding:0;}
#tab ul li #oDIV1 ol li {position:static;float:none;font-size:0;height:auto;}
#tab ul li #oDIV1 ol li a {font-size:12px;display:block;padding:5px 0 1px;}

/*TAB2效果[img]*/
#tab ul li #oDIV2 img {margin:8px;border:none;}

/*TAB3效果[iframe]*/
#tab ul li #oDIV3 iframe {border:none;width:440px;height:157px;margin:5px;}

body{

	margin:0;

	padding:0;

	background:#f1f1f1;

	font:70% Arial, Helvetica, sans-serif; 

	color:#555;

	line-height:150%;

	text-align:left;

}

a{

	text-decoration:none;

	color:#057fac;

}

a:hover{

	text-decoration:none;

	color:#999;

}

h1{

	font-size:140%;

	margin:0 20px;

	line-height:80px;	

}

h2{

	font-size:130%;

}

#container{

	margin:0 auto;

	width:680px;

	background:#fff;

	padding-bottom:20px;

}

#content{margin:0 20px;}

p.sig{	

	margin:0 auto;

	width:680px;

	padding:1em 0;

}

form{

	margin:1em 0;

	padding:.2em 20px;

	background:#eee;

}


</style>

</head>

<body>

<div id="container">


	<div id="content">


	<!-- all you need with Tablecloth is a regular, well formed table. No need for id's, class names... --> 

<div id="tab">

 <ul>
 
 <li id="tab1" class="up"><h3><a href="####" onClick = "javascript:toggleTo(1)">支付</a></h3> 
 
 <!-- onclick鼠标释放，onmousemove鼠标经过。 --> 
 
 <div id="oDIV1"> 
  	<ol> 
 
 	<li>
 	
 	<span>
 	
 	<table cellspacing="0" cellpadding="1" border="1" align="center" width = "150%">

			<tr>
				
				<th>1st Page</th>
				<th>2nd Page</th>
				<th>3rd Page</th>
			</tr>
			<tr>

				<th>Title01</th>

				<th>Title02</th>

				<th>Title03</th>

				<th>Title04</th>
				
				<th>Title05</th>
				
				<th>To do</th>

			</tr>

			<tr>

				<td>Data01</td>

				<td>Data02</td>

				<td>Data03</td>

				<td>Data04</td>
				
				<td>Data05</td>
				
				<td> <a onClick = "modify()" > Edit </a> </td>

			</tr>			

			<tr>

				<td>Data</td>

				<td>Data</td>

				<td>Data</td>

				<td>Data</td>
				
				<td>Data</td>

				<td> <a onClick = "modify()" > Edit </a> </td>

			</tr>			

			<tr>

				<td> <input style = "textfield" size="12" maxlength="20"/> </td>
				<td> <input style = "textfield" size="12" maxlength="20"/> </td>
				<td> <input style = "textfield" size="12" maxlength="20"/> </td>
				<td> <input style = "textfield" size="12" maxlength="20"/> </td>
				<td> <input style = "textfield" size="12" maxlength="20"/> </td>
				
				<td> <a onClick = "modify()" > Submit </a> </td>
				
			</tr>
			
	  </table>
	  </span>
	  </li>
	  </ol>
 
 </div>
 
 </li> 
 <li id="tab2"><h3><a href="####" onClick="javascript:toggleTo(2)">软件下载</a></h3> 

 	<div id="oDIV2"> 
 	 <ol> 
 
 <li>
 
 <span>test1</span>
 
 </li> 
 
 </ol> 
	</div>
 </li> 
 
 <li id="tab3"><h3><a href="####" onClick="javascript:toggleTo(3)">问题答疑</a></h3> 
	<div id="oDIV3"> 
 	 <ol> 
 
 <li>
 
 <span>test1</span>
 
 </li> 
 
 </ol> 
	</div>
 </li> 
 
 <li id="tab4"><h3><a href="####" onClick="javascript:toggleTo(4)">客服</a></h3> 
	<div id="oDIV4"> 
 	 <ol> 
 
 <li>
 
 <span>test1</span>
 
 </li> 
 
 </ol> 
	</div>
 </li> 
 
 </ul>
</div>
		
	
		<h2>&nbsp;</h2>

  </div>
  
</div>

</body>

</html>
